<%@ include file="/WEB-INF/views/common/includes.jsp"%>

<body>
	<c:if test="${not empty param.success}">
		<div class="alert alert-success">
			<button type="button" class="close" data-dismiss="alert">
				<i class="icon-remove"></i>
			</button>
			<i class="icon-ok"></i> You are now following <strong>${param.username}</strong>!
		</div>
	</c:if>
	<c:if test="${reportPossible eq 'no'}">
		<div class="alert alert-info">
			<button type="button" class="close" data-dismiss="alert">
				<i class="icon-remove"></i>
			</button>
			<i class="icon-info"></i> You reported this user!
		</div>
	</c:if>
	<section class="panel">
		<div class="panel-body">
			<div class="col-lg-3">
				<a href="#" class="pull-left thumb-md m-r"> <c:if
						test="${not empty userId}">
						<c:if test="${not empty hasPicture}">
							<img src="/profile/picture/${userId}" class="img-rounded">
						</c:if>
						<c:if test="${empty hasPicture}">
							<img src="/theme/images/avatar_default.jpg" class="img-rounded">
						</c:if>

					</c:if>
				</a>
			</div>
			<div class="col-lg-4">
				<div class="row" style="margin-bottom: 10px">
					<div class="h3 m-t-xs m-b-xs">${param.username}</div>
				</div>
				<div class="row" style="margin-bottom: 10px">
					<span class="text-muted"><i class="icon-group"></i> <span
						class="text-bold" style="font-weight: 900">Title: </span> <c:out
							value="${title}" /></span>
				</div>

				<div class="row" style="margin-bottom: 10px">

					<div class="progress progress-sm progress-striped  active">
						<div class="progress-bar progress-bar-success"
							data-toggle="tooltip" data-original-title="${percentage}%"
							style="width:${percentage}%"></div>
					</div>
				</div>
				<div class="row" style="margin-bottom: 10px">
					<span class="text-muted"><i class="icon-gamepad"></i> <span
						class="text-bold" style="font-weight: 900">Point: </span> <c:out
							value="${currentPoint}" /></span>
				</div>
			</div>
			<div class="col-lg-5 text-right">
				<div class="btn-group">
				
				<c:if test="${reportPossible eq 'yes'}">
					<form method="get" action="reportUser">
						<input class="btn btn-primary" type="submit" value="Report User"> <input
							type="hidden" value="${param.username}" name="username" />
					</form>
				</c:if>
				</div>
				<div class="btn-group">
				<c:if test="${not empty user && state eq 'possible' && empty same}">
					
					<form method="get" action="follow">
						<input type="submit" class="btn btn-success" value="Follow"> <input type="hidden"
							value="${param.username}" name="username" />
					</form>
				</c:if>
		
				<c:if
					test="${not empty user && state eq 'notpossible' && empty same}">
					
					<form method="get" action="unfollow">
						<input type="submit" class="btn btn-danger" value="Unfollow"> <input
							type="hidden" value="${param.username}" name="username" />
					</form>
				</c:if>
				</div>
			</div>
		</div>
		<section class="panel">
			<header class="panel-heading bg-light">
				<ul class="nav nav-tabs nav-justified">
					<li class="active"><a href="#myrecipes" data-toggle="tab">${param.username}'s
							Recipes</a></li>
					<li><a href="#favoriterecipes" data-toggle="tab">${param.username}'s Favorite
							Recipes</a></li>
					<li><a href="#followlist" data-toggle="tab">${param.username}'s Followers/Following</a></li>
				</ul>
			</header>
			<div class="panel-body">
				<div class="tab-content">
					<div class="tab-pane active" id="myrecipes">
						<div class="col-lg-12">
							<div class="panel-heading" style="height: 50px">
								<h5>${param.username}'s Recipes</h5>
							</div>
							<c:if test="${not empty myrecipes}">
								<div class="panel-body">
									<c:forEach var="text" items="${myrecipes}">
									<div class="col-lg-2">
										<a href="#" class="pull-left thumb-md m-r"> <c:if
												test="${not empty text.id}">
												<img src="recipePicture/${text.id}" style="height: 50px;"
														width="100%" class="img-rounded">
											</c:if>
										</a>
										<%--Recipe resmi yoksa hata donmesin. Default recipe donsun. --%>
										<c:if test="${empty text.id}">
											<a href="#" class="pull-left thumb m-r"> <!-- <img src="theme/images/recipe_default.jpg" style="height: 50px;"
														width="100%" class="img-rounded"> -->
											</a>
										</c:if>
									</div>
									<div class="col-lg-3" style="margin-top: 15px">
										<c:url var="goToTheRecipe"
											value="/recipe/recipeInfo?recipeId=${text.id}"></c:url>
										<a href="<c:out value="${goToTheRecipe}"/>">${text.recipe_name}</a>
									</div>
									<div class="col-lg-3" style="margin-top: 15px">
										<strong style="float: left">RATE:</strong>

											<div style="float: left"
												data-bind="foreach: new Array(full(${text.rate}))">
												<i class="icon-star"></i>
											</div>
											<div style="float: left"
												data-bind="foreach: new Array(half(${text.rate}))">
												<i class="icon-star-half-empty"></i>
											</div>
											<div style="float: left; margin-right: 5px"
												data-bind="foreach: new Array(empty(${text.rate}))">
												<i class="icon-star-empty"></i>
											</div>

											<p id="rate" style="display: none">${text.rate}</p>
											<strong>${text.rate}</strong> <strong>/5</strong>

									</div>
									<div class="col-lg-4" style="margin-bottom:40px">
										<c:url var="goToRecipe"
											value="/recipe/recipeInfo?recipeId=${text.id}"></c:url>
										<a class="btn btn-primary"
											href="<c:out value="${goToRecipe}" />">Go to Recipe</a>
									</div>
									</c:forEach>
								</div>
							</c:if>
							<c:if test="${empty myrecipes}">
								Sorry, ${param.username} haven't got any recipe.
							</c:if>
						</div>
					</div>
					<div class="tab-pane" id="favoriterecipes">
						<div class="panel-heading" style="height: 50px">
							<div class="col-lg-8">
								<h5>${param.username}'s Favorite Recipes:</h5>
							</div>
						</div>
						<c:if test="${not empty myfavoriterecipes}">
							<div class="panel-body">
								<c:forEach var="text" items="${myfavoriterecipes}">
									<div class="col-lg-12">
										<div class="col-lg-2">
											<a href="#" class="pull-left thumb-md m-r"> <c:if
													test="${not empty text.id}">
													<img src="recipe/picture/${text.id}" style="height: 50px;"
														width="100%" class="img-rounded">
												</c:if>
											</a>

											<c:if test="${empty text.id}">
												<a href="#" class="pull-left thumb m-r"> <!-- <img src="theme/images/recipe_default.jpg" class="img-rounded"> -->
												</a>
											</c:if>
										</div>
										<div class="col-lg-3" style="margin-top: 15px">
											<c:url var="goToTheRecipe"
												value="/recipe/recipeInfo?recipeId=${text.id}"></c:url>
											<a href="<c:out value="${goToTheRecipe}"/>">${text.recipe_name}</a>
										</div>
										<div class="col-lg-3" style="margin-top: 15px">
											<strong style="float: left">RATE:</strong>

											<div style="float: left"
												data-bind="foreach: new Array(full(${text.rate}))">
												<i class="icon-star"></i>
											</div>
											<div style="float: left"
												data-bind="foreach: new Array(half(${text.rate}))">
												<i class="icon-star-half-empty"></i>
											</div>
											<div style="float: left; margin-right: 5px"
												data-bind="foreach: new Array(empty(${text.rate}))">
												<i class="icon-star-empty"></i>
											</div>

											<p id="rate" style="display: none">${text.rate}</p>
											<strong>${text.rate}</strong> <strong>/5</strong>

										</div>
										<div class="col-lg-4"
											style="margin-bottom: 40px; margin-top: 15px">
											<c:url var="goToUser"
												value="/publicProfile?username=${text.recipe_owner}"></c:url>
											<a href="<c:out value="${goToUser}"/>">${text.recipe_owner}</a>
										</div>
									</div>
								</c:forEach>
							</div>
						</c:if>
						<c:if test="${empty myfavoriterecipes}">
								Sorry, you haven't got any favorite recipe.
							</c:if>
					</div>
					<div class="tab-pane" id="followlist">
						<div class="col-lg-6">
							<section class="panel">
								<c:if test="${not empty followers}">
									<div class="panel-heading">
										<div class="col-lg-8" style="margin-top:-7px">
											<strong>Followers:</strong>
										</div>
										<div class="col-lg-4" style="margin-top:-7px">
											<small><c:out value="${followingCount}" /> Followers</small>
										</div>
									</div>
									
									<c:forEach var="text" items="${followers}">
										<div class="panel-body">
											<div class="col-lg-2"></div>
											<div class="col-lg-4">
												<a href="#" class="pull-left thumb-md m-r"> <c:if
														test="${not empty text.name_id}">
														<img src="/profile/picture/${text.name_id}" class="img-rounded">
														test="${not empty text.id}">
														<img src="/profile/picture/${text.id}"
															style="height: 50px" class="img-rounded">
													</c:if>
												</a>
												<%--Profile resmi yoksa hata donmesin. Default avatar donsun. --%>
												<c:if test="${empty text.name_id}">
													<a href="#" class="pull-left thumb m-r"> <img
														src="/theme/images/avatar_default.jpg"
														style="height: 50px" class="img-rounded">
													</a>
												</c:if>
											</div>
											<div class="col-lg-4" style="margin-top: 15px">
												<c:url var="goToUser"
													value="/publicProfile?username=${text.name}"></c:url>
												<a href="<c:out value="${goToUser}"/>">${text.name}</a>

											</div>
											<div class="col-lg-2"></div>												
									</div>
								</c:forEach>
								</c:if>
							</section>
						</div>
						
						<div class="col-lg-6">
							<section class="panel">
								<c:if test="${not empty followings}">
									<div class="panel-heading">
										<div class="col-lg-8" style="margin-top:-7px">
											<strong>Followings:</strong>
										</div>
										<div class="col-lg-4" style="margin-top:-7px">
											<small><c:out value="${followerCount}" /> Followings</small>
										</div>
									</div>
									
									<c:forEach var="text" items="${followings}">
										<div class="panel-body">
											<div class="col-lg-2"></div>
											<div class="col-lg-4">
												<a href="#" class="pull-left thumb-md m-r"> <c:if
														test="${not empty text.follows_id}">
														<img src="/profile/picture/${text.follows_id}" class="img-rounded">
														test="${not empty text.id}">
														<img src="/profile/picture/${text.id}"
															style="height: 50px" class="img-rounded">
													</c:if>
												</a>
												<%--Profile resmi yoksa hata donmesin. Default avatar donsun. --%>
												<c:if test="${empty text.follows_id}">
													<a href="#" class="pull-left thumb m-r"> <img
														src="/theme/images/avatar_default.jpg"
														style="height: 50px" class="img-rounded">
													</a>
												</c:if>
											</div>
											<div class="col-lg-4" style="margin-top: 15px">
												<c:url var="goToUser"
													value="/publicProfile?username=${text.follows}"></c:url>
												<a href="<c:out value="${goToUser}"/>">${text.follows}</a>

											</div>
									</div>
								</c:forEach>
								</c:if>
							</section>							
						</div>
					</div>
				</div>
			</div>
		</section>
	</section>
	<script>
		var full = function(rate) {
			return parseInt(rate);
		}

		var half = function(rate) {
			if (rate == parseInt(rate)) {
				return 0;
			} else {
				return 1;
			}
		}

		var empty = function(rate) {
			return parseInt(5 - rate);
		}
		var StarViewModel = function() {

			var val = document.getElementById("rate").innerHTML;
			console.log(document.getElementById("rate").innerHTML);
			console.log(val);
			this.rate = ko.observable(val);
			console.log(this.rate());
			this.fullStar = ko.observableArray();
			this.halfStar = ko.observableArray();
			this.emptyStar = ko.observableArray();
			for (var i = 0; i < parseInt(this.rate()); i++) {
				this.fullStar.push(1);
			}

			if (parseInt(this.rate()) != this.rate()) {
				this.halfStar.push(1);
			}

			for (var i = 0; i < 5 - (this.fullStar().length + this.halfStar().length); i++) {
				this.emptyStar.push(1);
			}
		};

		ko.applyBindings(new StarViewModel());
	</script>
</body>
